<template>
	<!-- 接单设置 -->
	<view class="flex-col page">
		<view class="flex-col group" style="margin-top: 20rpx;">
			<view class="justify-between group_1">
				<text class="text_1">当前状态</text>
				<view class="flex-row">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input text_2">{{array[index]}}</view>
					</picker>
					<!-- <text class="text_2">接单中</text> -->
					<image :src="$IMG_URL+'16557871089085561438.png'" class="image_1-1 image_2" />
				</view>
			</view>
			<view class="flex-col group_3">
				<view class="flex-col items-start text-wrapper"><text class="text_3">设置休息日</text></view>
				<view class="flex-col group_4">
					<view v-for="(item,index) in arrlist" :key="index">
						<view class="justify-between group_5">
							<view class="flex-row">
								<text class="text_4">选择日期</text>
								<image :src="$IMG_URL+'16557871089178669789.png'" class="image_4"
									@click="dele(index)" />
							</view>
							<view class="flex-row group_6">
								<picker mode="date" :value="item.date" @change="(e)=>{bindReatDateChange(e,index)}">
									<view class="uni-input">{{item.date}}</view>
								</picker>
								<image :src="$IMG_URL+'index/goright.png'" class="image_1" />
							</view>
						</view>

					</view>
					<view class="justify-center button">
						<image :src="$IMG_URL+'16557868010275878721.png'" class="image_6" />
						<text class="text_8" @click="addnewReat">新增休息日</text>
					</view>
					<view class="flex-col items-center button_1"><text class="text_9" @click="save">保存</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				Restdate: "2022-9-8",
				index: 0,
				array: ['接单中', '休息日'],
				arrlist: [{
						'date': '2022-2-10'
					},
					{
						'date': '2022-5-10'
					}
				],
				changeState: 0
			};
		},
		methods: {
			onPullDownRefresh() {
				// this.getlist()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						console.log(beforePage)
						beforePage.$vm.$refs.mine.getinfo();
					}

				})
			},
			bindReatDateChange(e, index) {
				this.arrlist[index].date = e.detail.value;
			},
			addnewReat() {
				// 新增休息日
				let newarr = {
					'date': '2022-7-15'
				}
				if (this.arrlist.length < 20) {
					this.arrlist.push(newarr);
				} else {
					that.$u.toast('休息日条数已到上限');
				}
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			dele(index) {
				if (this.arrlist.length <= 1) {
					this.$u.toast('最后一个不能删除');
				} else {
					this.arrlist.shift(index);
				}

			},
			save() {
				let takeOrdersStatus = this.index;
				let daysArr = [];
				for (var i = 0; i < this.arrlist.length; i++) {
					daysArr[i] = this.arrlist[i].date;
				}
				this.$http('ours.orderSet', {
					'takeOrdersStatus': takeOrdersStatus,
					'daysArr': daysArr
				}).then(res => {
					if (res.code == 200) {
						this.$u.toast(res.msg);
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
	};
</script>

<style scoped lang="css">
	.flex-row {
	   align-items: center;	
	}
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.image_1 {
		margin: 15rpx 0 8rpx 14rpx;
		flex-shrink: 0;
		width: 22rpx;
		height: 22rpx;
	}

	.image_1-1 {
		margin: 6rpx 0 8rpx 14rpx;
		flex-shrink: 0;
		width: 15rpx;
		height: 22rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 48rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 29rpx 32rpx 0;
	}

	.group_3 {
		margin-top: 42rpx;
	}

	.text_1 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text-wrapper {
		padding: 19rpx 0 31rpx;
		background-color: #f6f7f9;
	}

	.group_4 {
		padding: 0 32rpx;
	}

	.text_2 {
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_2 {
		/* margin-top: 15rpx; */
		margin-bottom: 0;
		margin-left: 15rpx;
		margin-right: 0;
	}

	.text_3 {
		margin-left: 32rpx;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_5 {
		padding: 29rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		margin-top: 29rpx;
	}

	.button_1 {
		margin-top: 557rpx;
		padding: 26rpx 0 26rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_4 {
		margin-bottom: 7rpx;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_6 {
		margin-top: 7rpx;
	}

	.group_8 {
		padding-bottom: 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.button {
		margin-top: 35rpx;
		padding: 16rpx 0;
		align-self: flex-end;
		border-radius: 32rpx;
		border: 1px solid #1d6aff;
		width: 220rpx;
	}

	.text_9 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_5 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_9 {
		margin-bottom: 3rpx;
	}

	.group_10 {
		margin-top: 7rpx;
	}

	.image_6 {
		margin-top: 6rpx;
		width: 22rpx;
		height: 22rpx;
	}

	.text_8 {
		margin-left: 12rpx;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_6 {
		margin-bottom: 4rpx;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_4 {
		margin-left: 24rpx;
		/* margin-top: 10rpx; */
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
	}

	.text_7 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
